<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MHTML转PDF - Shioa</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe', 
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a'
                        },
                        secondary: '#64748b',
                        accent: {
                            green: '#10b981',
                            purple: '#8b5cf6',
                            orange: '#f59e0b',
                            red: '#ef4444',
                            blue: '#06b6d4'
                        },
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        info: '#06b6d4'
                    },
                    borderRadius: {
                        'button': '8px'
                    },
                    fontFamily: {
                        'sans': ['Inter', 'ui-sans-serif', 'system-ui']
                    },
                    boxShadow: {
                        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
                        'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04)',
                        'strong': '0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 2px 10px -2px rgba(0, 0, 0, 0.04)'
                    }
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            min-height: 1024px;
        }
        .toast-container { 
            position: fixed; 
            top: 1rem; 
            right: 1rem; 
            z-index: 9999; 
        }
        .status-bar { 
            position: fixed; 
            top: 0; 
            left: 0; 
            right: 0; 
            z-index: 50; 
        }
        
        /* 拖拽上传区域 */
        .upload-area {
            border: 2px dashed #cbd5e1;
            transition: all 0.3s ease;
        }
        
        .upload-area.drag-over {
            border-color: #3b82f6;
            background-color: #dbeafe;
        }
        
        .file-item {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
        }
        
        .file-item:hover {
            box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* 进度条 */
        .progress-bar {
            width: 100%;
            height: 6px;
            background: #f1f5f9;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
            border-radius: 6px;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen font-sans">
    <!-- 状态提示栏 -->
    <div id="status-bar" class="hidden status-bar bg-blue-500 text-white p-3 text-center">
        <div class="flex items-center justify-center">
            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
            <span id="status-text">正在加载...</span>
        </div>
    </div>

    <!-- Toast 容器 -->
    <div id="toast-container" class="toast-container space-y-2"></div>

    <!-- 导航由 shared-navigation.js 统一管理，实现真正的组件复用 -->

    <!-- 面包屑导航 -->
    <div class="max-w-[1440px] mx-auto px-6 py-4">
        <nav class="flex items-center gap-2 text-sm text-gray-500">
            <a href="index.html" class="hover:text-primary-600 transition-colors">
                <i class="fas fa-home"></i>
            </a>
            <span class="mx-2">/</span>
            <span class="text-gray-700">MHTML转PDF</span>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <main class="max-w-[1440px] mx-auto px-6 pb-8">


        <!-- 转换工具区域 -->
        <div class="bg-white rounded-xl shadow-medium border border-gray-100 overflow-hidden">
            <!-- 头部区域 -->
            <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">文件上传转换</h3>
                        <p class="text-sm text-gray-600 mt-1">支持单文件和批量转换，最多可同时处理10个文件</p>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="text-xs text-gray-500">
                            支持格式: <span class="font-mono bg-gray-100 px-2 py-1 rounded">.mhtml .mht</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 上传区域 -->
            <div class="p-6">
                <div class="upload-area rounded-lg p-8 text-center" 
                     ondrop="dropHandler(event);" 
                     ondragover="dragOverHandler(event);" 
                     ondragenter="dragEnterHandler(event);"
                     ondragleave="dragLeaveHandler(event);">
                    <div class="mb-4">
                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
                        <h4 class="text-lg font-semibold text-gray-700 mb-2">拖拽文件到此处或点击选择</h4>
                        <p class="text-sm text-gray-500 mb-4">支持 MHTML 和 MHT 格式文件</p>
                        <input type="file" id="file-input" multiple accept=".mhtml,.mht" class="hidden" onchange="handleFileSelect(event)">
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <button onclick="document.getElementById('file-input').click()" 
                                    class="flex items-center gap-2 bg-primary-500 text-white px-6 py-3 rounded-button font-medium hover:bg-primary-600 transition-colors">
                                <i class="fas fa-file-upload"></i>
                                <span>选择文件</span>
                            </button>
                            <div class="text-xs text-gray-400">
                                单个文件最大50MB，批量最多10个文件
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 文件列表 -->
                <div id="file-list" class="mt-6 space-y-3 hidden">
                    <h4 class="font-semibold text-gray-700 mb-3">选择的文件:</h4>
                    <!-- 文件列表项将在这里动态生成 -->
                </div>

                <!-- 转换选项 -->
                <div id="conversion-options" class="mt-6 hidden">
                    <h4 class="font-semibold text-gray-700 mb-3">转换选项:</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-2">页面格式</label>
                            <select id="format-select" class="w-full px-3 py-2 border border-gray-300 rounded-button focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none">
                                <option value="A4" selected>A4</option>
                                <option value="Letter">Letter</option>
                                <option value="Legal">Legal</option>
                                <option value="A3">A3</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-2">页边距</label>
                            <select id="margin-select" class="w-full px-3 py-2 border border-gray-300 rounded-button focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none">
                                <option value="1cm" selected>标准 (1cm)</option>
                                <option value="0.5cm">窄边距 (0.5cm)</option>
                                <option value="2cm">宽边距 (2cm)</option>
                                <option value="0">无边距</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 转换按钮 -->
                <div id="convert-actions" class="mt-6 flex justify-center hidden">
                    <button onclick="startConversion()" id="convert-btn"
                            class="flex items-center gap-2 bg-gradient-to-r from-orange-500 to-orange-600 text-white px-8 py-3 rounded-button font-medium shadow-lg hover:from-orange-600 hover:to-orange-700 hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                        <i class="fas fa-magic text-sm"></i>
                        <span>开始转换</span>
                    </button>
                </div>

                <!-- 进度指示 -->
                <div id="progress-section" class="mt-6 hidden">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">转换进度</span>
                            <span id="progress-text" class="text-sm text-gray-500">准备中...</span>
                        </div>
                        <div class="progress-bar">
                            <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                </div>

                <!-- 结果展示 -->
                <div id="results-section" class="mt-6 hidden">
                    <h4 class="font-semibold text-gray-700 mb-3">转换结果:</h4>
                    <div id="results-list" class="space-y-3">
                        <!-- 结果列表项将在这里动态生成 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 使用说明 -->
        <div class="mt-8 bg-white rounded-xl shadow-soft border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>使用说明
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">📁 支持格式</h4>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li>• MHTML文件 (.mhtml)</li>
                        <li>• MHT文件 (.mht)</li>
                        <li>• 单个文件最大50MB</li>
                        <li>• 批量转换最多10个文件</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">⚙️ 转换说明</h4>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li>• 使用Chrome引擎渲染</li>
                        <li>• 保留原始样式和布局</li>
                        <li>• 自动清理临时文件</li>
                        <li>• 支持多种页面格式</li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

    <!-- JavaScript -->
    <script src="js/env.js"></script>
    <script>
    // 设置全局API配置
    window.API_BASE_URL = API_BASE_URL;
    </script>
    <script src="js/config.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <script src="js/mhtml-pdf.js"></script>
    <script src="js/shared-navigation.js"></script>
</body>
</html>